<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*<!--清楚默认样式-->*/
        * {
            padding: 0;
            margin: 0;
        }

        .wrapper {
            width: 1280px;
            height: 870px;
            margin: auto;
        }

        .header {
            width: 100%;
            height: 20%;
            background-color: sienna;
            /*position: relative;*/
        }

        .main {
            width: 100%;
            height: 60%;
            position: relative;
            /*background-color: aliceblue;*/
            /*position: relative;*/
            /*position: absolute;*/
        }

        .left {
            width: 10%;
            height: 100%;
            background-color: #446398;

        }

        .content {
            width: 90%;
            height: 100%;
            background-color: #cccccc;
            position: absolute;
            top: 0px;
            left: 10%;
        }

        .footer {
            width: 100%;
            height: 20%;
            background-color: black;
        }

        .headerUlLi > li {

            list-style: none;
            height: 35px;
            width: 7.692%;
            background-color: rgba(68, 99, 152, 0.7);
            float: left;
            text-align: center; /* 水平居中 */
            line-height: 35px;

            /*border-right: 1px solid red;*/
            /*box-sizing: content-box;*//* 默认值 */
            box-sizing: border-box; /* CSS3才出现 */
        }

        .headerUlLi :hover {
            background-color: rgba(0, 68, 115, 1);
            opacity: 1;
            visibility: visible;
            transition: all 1s;
        }

        .headerUlLi > li > a {

            color: white;
            list-style: none;
            text-decoration: none;
        }

        /*当鼠标指到 .headerUlLi > li时候，触发.scendUlLi > li的style变化*/
        .headerUlLi > li:hover .scendUlLi > li {
            opacity: 1;
            visibility: visible;
            transition: all .5s;
            /*display: block;*/

        }

        .scendUlLi > li:hover {
            opacity: 1;
            visibility: visible;
            transition: all .5s;
            /*231,242,20*/
        }

        .scendUlLi > li {
            width: 170%;
            visibility: hidden;
            /*display: none;*/
            transition: all .5s;
            opacity: 0;
            list-style: none;
            text-align: left;
            background-color: rgba(0, 102, 204, 0.6);
            /*margin-left: 10px;*/

        }

        .scendUlLi > li > a {
            color: white;
            list-style: none;
            text-decoration: none;

            box-sizing: border-box;
        }

        /*ul > li >a {*/
        /*!*color: white;*!*/
        /*list-style: none;*/
        /*text-decoration: none;*/
        /*}*/
        /*ul>li>ul>li{*/
        /*width: 100%;*/
        /*color: white;*/
        /*list-style: none;*/
        /*text-decoration: none;*/
        /*}*/
        /*ul>li>ul>li>a{*/
        /*color: white;*/
        /*list-style: none;*/
        /*text-decoration: none;*/
        /*}*/

        /*通常父容器使用relative,子容器使用absolute,作用是让子容器跟随父容器定位*/
        /*后代选择器，有直接选择，所有选择*/
        /*
        所有选择器
        .content li{--选择后代全部li

        }
        */
        /*
           直接选择器
        .content>li{--选择第一代li

        }

        */

        /*.content > .loginOrRegisterBox > #form > form > div > a {*/
        /*float: right;*/
        /*margin-top: 1px;*/
        /*color: white;*/
        /*text-decoration: none;*/
        /*}*/

    </style>


</head>
<body>

<div class="wrapper">
    <div class="header">
        <!--页眉-->
        <ul class="headerUlLi">
            <li><a href="#">首页</a></li>
            <li><a href="#">学校简介</a>
                <ul class="scendUlLi">
                    <li><a href="#">现任校领导</a></li>
                    <li><a href="#">历任书记校长</a></li>
                    <li><a href="#">学校概况</a></li>
                    <li><a href="#">历史沿革</a></li>
                    <li><a href="#">校标、校训</a></li>
                    <li><a href="#">校歌</a></li>
                </ul>
            </li>
            <li><a href="#">机构设置</a>
                <ul class="scendUlLi">
                    <li><a href="#">党群部门</a></li>
                    <li><a href="#">行政管理部门</a></li>
                    <li><a href="#">教学单位</a></li>
                    <li><a href="#">其他机构</a></li>
                    <li><a href="#">科研机构</a></li>
                </ul>


            </li>
            <li><a href="#">师资队伍</a>


            </li>


            <li><a href="#">科学研究</a></li>
            <li><a href="#">国际交流</a></li>
            <li><a href="#">招生就业</a>
                <ul class="scendUlLi">
                    <li><a href="#">毕业生就业网</a></li>
                    <li><a href="#">招生信息网</a></li>
                    <li><a href="#">研究生招生</a></li>

                </ul>


            </li>
            <li><a href="#">北海校区</a></li>
            <li><a href="#">学术会议</a>
                <ul class="scendUlLi">
                    <li><a href="#">ICACI 2019</a></li>
                    <li><a href="#">MIME2019</a></li>
                    <li><a href="#">NRPS'2019</a></li>
                    <li><a href="#">CSET2019</a></li>

                </ul>


            </li>
            <li><a href="#">诚聘英才</a></li>
            <li><a href="#">人才培养</a>

                <ul class="scendUlLi">
                    <li><a href="#">本科招生</a></li>
                    <li><a href="#">本科教育</a></li>
                    <li><a href="#">研究生教育</a></li>
                    <li><a href="#">桂电信科院</a></li>
                    <li><a href="#">专科招生</a></li>
                    <li><a href="#">专科教育</a></li>

                </ul>
            </li>
            <li><a href="#">党史学习教育</a>

            </li>
            <li><a href="#">常用链接</a>

                <ul class="scendUlLi">
                    <li><a href="#">校外VPN访问</a></li>
                    <li><a href="#">举报</a></li>

                </ul>

            </li>
        </ul>
    </div>
    <div class="main">

        <div class="left">
            左部
        </div>
        <div class="content">
            内容

        </div>
    </div>
    <div class="footer">
        页脚
    </div>
</div>

</body>
</html>